<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder title="素材中心" :autoBack="true"></up-navbar>
		<zjy-tabs :tabs="tabs" :flex="true" :activeId="activeId" @tabClick="handleTabClick" bgColor="#fff" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-32"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view v-for="(item, index) in listData" :key="index" class="material-item">
					<view class="item-wrap">
						<image
							src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
							class="cover"
							mode="aspectFill"
						/>
						<view class="content">
							<view class="font-bold">一生一次旅游 — 恩施大峡谷</view>
							<view class="flex-a space-between mt-20">
								<view class="flex-a">
									<image
										src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
										class="icon-32 circle"
										mode="aspectFill"
									/>
									<text class="fs-22 c-grey-86 ml-8 m-w-180 text-ellipsis">恩施大峡谷旅游风景</text>
								</view>
								<view class="flex-a">
									<image :src="imgBaseUrl + 'icon-like.png'" class="icon-24 mr-6" />
									<text class="c-grey-86">4721</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
		<view v-if="showScalePopup" class="scale-popup">
			<view class="cover">
				<image
					src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
					mode="aspectFill"
				/>
			</view>
			<view class="save-picture">
				<image :src="imgBaseUrl + 'icon-download.png'" class="icon-32 mr-8" />
				<text>保存图片</text>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const showScalePopup = ref(false)
const tabs = ref<ZjyTabItem[]>([
	{
		id: "1",
		name: "海报",
	},
	{
		id: "2",
		name: "图片",
	},
	{
		id: "3",
		name: "笔记",
	},
	{
		id: "4",
		name: "视频",
	},
])
const activeId = ref("1")
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 88rpx)`

const handleTabClick = (id: string) => {
	activeId.value = id
}

//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let { loadMore, triggered, onPulling, onRefresh, onRestore, onAbort, getListData, listData, searched, freshing } =
	freshLoadingRef
freshLoadingRef.listService.value = null
freshLoadingRef.listData.value.push(...new Array(20).fill(1))
//#endregion
</script>
<style lang="scss" scoped>
.material-item {
	width: 50%;
	padding-bottom: 18rpx;
	display: inline-flex;
	&:nth-child(2n) {
		padding-left: 10rpx;
	}
	&:nth-child(2n + 1) {
		padding-right: 10rpx;
	}
	.item-wrap {
		width: 100%;
		display: inline-flex;
		flex-direction: column;
		background: $c-white;
		border-radius: 16rpx;
		overflow: hidden;
		.cover {
			width: 100%;
			height: 456rpx;
		}
		.content {
			padding: 20rpx 16rpx 24rpx;
		}
	}
}
.scale-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: $c-black-_5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 24rpx;
	z-index: 999;
	.cover {
		width: 100%;
		height: 936rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.save-picture {
		margin-top: 64rpx;
		padding: 20rpx 32rpx;
		transform: rotate(360deg);
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: $c-white;
		background: $c-white-_1;
		border: 1rpx solid $c-white-_2;
		border-radius: 64rpx;
	}
}
</style>
